<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style>
        #link-button a {
            /* 当显式声明超链接字体颜色时
            未访问/访问过等所有字体样式被取消 */
            color: white;
            background: #f44336;
            text-decoration: none;
            padding: 8px 16px;
        }

        #link-button a:hover {
            background: red;
        }

        #nav li {
            display: inline;
        }

        #block span.block {
            display: block;
            height: 25px;
            padding: 10px;
            border: 1px solid red;
        }

        #inline-block table {
            border-collapse: collapse;
        }
        #inline-block th, #inline-block td {
            border-bottom: 1px solid #ddd;
        }

        #inline-block a {
            display: inline-block;
            background-color: #f44336;
            color: white;
            padding: 14px 25px;
            margin: 5px;
            text-decoration: none;
            border-radius: 5px;
        }

        #inline-block a:hover {
            background: red;
        }

        #v-align div {
            vertical-align: top;
            display: inline-block;
            width: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<div id="link-button">
    <p>按钮样式的超链接</p>
    <a href="#">This is a link</a>
</div>
<br>
<hr>
<div id="nav">
    <p>Display a list of links as a horizontal menu:</p>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>
</div>
<hr>
<div id="block">
    A display property with a value of "block" results in
    <span class="block">a line break between the two elements.</span>
</div>
<hr>
<div id="inline-block">
    <table>
        <tr>
            <td>HTML实验</td>
            <td><a href="#">编辑</a>
                <a href="#">删除</a></td>
        </tr>
        <tr>
            <td>CSS实验</td>
            <td><a href="#">编辑</a>
                <a href="#">删除</a></td>
        </tr>
    </table>
    <hr>
    <h3>vertical-align</h3>
    <p>vertical-align属性，与其他平级inline元素的垂直对其方式。默认baseline为基于元素的内容基线对其。 <br>
        声明在子元素，决定元素自身，与其他元素垂直对其方式，而非声明在容器
    </p>
    <div id="v-align">
        <div style="line-height: 2.2em; font-size: 2.5em">
            test1 <br> test2</div>
        <div>test1</div>
    </div>
</div>
</body>
</html>